<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html lang="pt-BR" id="ng-app" ng-app="">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Sistema de agendamento</title>
	<!-- Bootstrap -->
	<link href="../../lib/css/jqueryui/jquery-ui.min.css" rel="stylesheet" media="screen"/>
	<link href="../../lib/css/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen"/>
	<link href="../../lib/css/agendaweb.css" rel="stylesheet" media="screen"/>
</head>
<body>

	<tiles:insertAttribute name="header" />

	<div class="container">
		<c:if test="${not empty sucesso}">
			<div class="alert alert-success" role="alert">${sucesso}</div>
		</c:if>
		<c:if test="${not empty erro}">
			<div class="alert alert-danger" role="alert">${erro}</div>
		</c:if>
		
		
		<tiles:insertAttribute name="body" />
	</div>

	<tiles:insertAttribute name="footer" />

	<script src="../../lib/js/jquery/jquery-2.1.1.min.js"></script>
	<script src="../../lib/js/bootstrap/bootstrap.min.js"></script>
	<script src="../../lib/js/jqueryui/jquery-ui.min.js"></script>

	<script type="text/javascript">
		$(function() {
			
			$.datepicker.regional['pt'] = {
			        closeText: 'Fechar',
			        prevText: '<Anterior',
			        nextText: 'Seguinte',
			        currentText: 'Hoje',
			        monthNames: ['Janeiro', 'Fevereiro', 'Mar&ccedil;o', 'Abril', 'Maio', 'Junho',
			        'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
			        monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
			        'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
			        dayNames: ['Domingo', 'Segunda-feira', 'Ter&ccedil;a-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'S&aacute;bado'],
			        dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'S&aacute;b'],
			        dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'S&aacute;b'],
			        weekHeader: 'Sem',
			        dateFormat: 'dd/mm/yy',
			        firstDay: 0,
			        isRTL: false,
			        showMonthAfterYear: false,
			        yearSuffix: ''
		    };
			
			$.datepicker.setDefaults( $.datepicker.regional[ "pt" ] )
			$('#dataInicio').datepicker();
			$('#dataFinal').datepicker();
			
			

			$("#contato").autocomplete({
				source : function(request, response) {
					$.ajax({
						url: '/agendaweb/pri/contato/lista/autocomplete',
						type: 'GET',
						data: {contato : request.term},
						dataType: 'json',
						success: function(data, textStatus, jqXHR) {
							response($.map(data, function(item) {
								return {
									label : item.nome,
									value : '',
									object: item
								};
							}));
						}
					});
				},
				minLength : 3,
				delay : 300,
				select : function(event, ui) {
					var hidden = $('#addContatos').find('input').eq(0);
					addContato(hidden, ui.item.object.id, ui.item.object.email +' ('+ ui.item.object.nome +')');
				},
				open : function() {
					$(this).removeClass("ui-corner-all")
							.addClass("ui-corner-top");
				},
				close : function() {
					$(this).removeClass("ui-corner-top")
							.addClass("ui-corner-all");
				}
			});
			
			//gambi para recuperar os contatos adicionados
			var hidden = $('#addContatos').find('input').get(0);
			
			if ($(hidden).val() != '') {
				contatos = $(hidden).val().split(',');
				
				for (var i = 0; i < contatos.length; i++) {
					if (contatos[i] != '') {
						var contato = contatos[i].split('#');
						addContato(hidden, contato[0], contato[1]);
					}
				}
				$(hidden).val('');
			}
			
		});
		
		
		function addContato(hidden, id, nome) {
			
			var lista = $('#listaAddContatos');
			
			var qt = $(lista).find('input[value^="'+ id +'#"]');
			
			if ($(qt).length == 0) {
				var li = $('<li></li>').appendTo(lista);
				
				var div = $('<div></div>').addClass('row').appendTo(li);
				$('<div></div>').text(nome).addClass('col-md-8').appendTo(div);
				
				var divB = $('<div></div>').addClass('col-md-4').appendTo(div);
				$('<input></input>').attr('type', 'button').attr('value', 'Remover').click(function () {
					remContato(this);
				}).addClass('btn btn-danger btn-xs').appendTo(divB);
				
				$(hidden).clone()
					.attr('value', id +'#'+ nome)
					.appendTo(li);
			}
		}
		
		function remContato(elemento) {
			var pai = $(elemento).parent();
			pai = $(pai).parent();
			pai = $(pai).parent();
			
			$(pai).remove();
		}
	</script>
	

</body>
</html>